<!DOCTYPE html>
<html>
<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>国信安-教务系统</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">

		<link rel="stylesheet" href="layui/css/layui.css" media="all">
		<style>
			/* 移动端 */
			
			@media screen and (max-width: 768px) {
				.layui-layout-admin .layui-layout-left,
				.layui-layout-admin .layui-body,
				.layui-layout-admin .layui-footer {
					left: 0;
				}
				.layui-layout-admin .layui-side {
					left: -300px;
				}
			}
			/*.layui-table td{
   	 height: 100px;
    }*/
			
			.layui-table td img {
				width: 100%;
				height: 100%;
			}
			
			.layui-input {
				width: 175px;
			}
			
			.layui-unselect {
				width: 200px;
			}
		</style>

	</head>
	<body>
		<!--名字  类型  学分区间 多条件查询-->
		<div class="layui-form" id="search-courseForm" lay-filter="search-courseForm">
			<!--或者<form class="layui-form" action=""></form> -->
			<div class="layui-form-item">
				<div class="layui-inline">
					<!--外层-->
					<!--不换行-->
					<label class="layui-form-label">课程名称:</label>
					<div class="layui-input-inline" style="width: 100px;">
						<!--内层-->
						<input type="text" class="layui-input" name="name">
					</div>
				</div>
			
				<div class="layui-inline">
					<!--外层-->
					<!--不换行-->
					<label class="layui-form-label">类型:</label>
					<div class="layui-input-inline">
						<!--option  查询出来的-->
						<select name="type" class="loadType">
							<option value="">--请选择--</option>
						</select>
					</div>
				</div>
					<div class="layui-inline">
					<!--外层-->
					<!--不换行-->
					<label class="layui-form-label">学分</label>
					<div class="layui-input-inline" style="width: 100px;">
						<!--内层-->
						<input type="text" class="layui-input" name="startSocre">
					</div>
					
				</div>
				<div class="layui-inline">
					<!--外层-->
					<!--不换行-->
					<label class="layui-form-label">-</label>
					<div class="layui-input-inline" style="width: 10px;">
						<!--内层-->
						<input type="text" class="layui-input" name="endSocre">
					</div>
					
				</div>
				<div class="layui-inline">
					<div class="layui-input-inline">
						<button id="search-submit" type="submit" class="layui-btn" lay-submit="search-submit" lay-filter="search-filter" style="margin-left:157px;">
					      	<i class="layui-icon layui-icon-search"></i>查询</button>
					</div>
				</div>
			</div>
		</div>

	<!--批量删除 添加按钮-->
		<div class="course-btns">
				<div class="layui-btn-container">
					<div class="layui-btn-group">
			<button type="button" class="layui-btn layui-btn-course" data-type="batchdel"><i class="layui-icon layui-icon-delete"></i>删除</button>
			<button type="button" class="layui-btn layui-btn-course" data-type="add"><i class="layui-icon layui-icon-addition"></i>添加</button>
			<!--<button type="button" class="layui-btn layui-btn-course" data-type="upload"><i class="layui-icon layui-icon-upload-circle"></i>批量上传</button>
			-->
			</div>
		</div>
	  </div>

		<!--表格数据-->
		<table id="test-course" lay-filter="filter-course"></table>
		<!--表格内置工具栏-->
		<script type="text/html" id="table-rows-course">
			<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
		</script>
		<!--添加数据的表单-->
		<div class="layui-form" id="courseForm" lay-filter="edit-courseForm" style="display: none;" >
			<!--或者<form class="layui-form" action=""></form> -->
			<!--在添加的时候 这板块不存在  修改 id板块就存在-->
			<div class="layui-form-item" id="display_id">
				<div class="layui-inline">
					<!--外层-->
					<!--不换行-->
					<label class="layui-form-label">课程编号:</label>
					<div class="layui-input-inline" style="width: 100px;">
						<!--内层-->
						<input type="text" class="layui-input" name="couId" readonly="">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<!--外层-->
					<!--不换行-->
					<label class="layui-form-label">课程名字:</label>
					<div class="layui-input-inline" style="width: 100px;">
						<!--内层-->
						<input type="text" class="layui-input" name="couName">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<!--外层-->
					<!--不换行-->
					<label class="layui-form-label">课程介绍:</label>
					<div class="layui-input-inline" style="width: 100px;">
						<!--内层-->
						<textarea name="couContext" required lay-verify="required" class="layui-textarea"></textarea>

					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<!--外层-->
					<!--不换行-->
					<label class="layui-form-label">类型:</label>
					<div class="layui-input-block">
						<!--option  查询出来的-->
						<select name="couTypeId" class="loadType">
							<option value="">--请选择--</option>
						</select>
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					
					<!--外层-->
					<!--不换行-->
					<label class="layui-form-label">课程分数:</label>
					<div class="layui-input-block">
						<!--内层-->
						<input type="text" class="layui-input" name="couScore">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button type="submit" class="layui-btn" lay-submit="courseForm-submit" lay-filter="courseForm-filter">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</div>
		
	</body>
	
	
	<script type="text/javascript" src="layui/layui.js"></script>
	<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
	<script>
		layui.use(['element', 'table', 'layer', 'form'], function() {
			//加载元素  element所以的元素form 表单元素layer 窗口 table 表格
			var element = layui.element,
				form = layui.form,
				layer = layui.layer,
				table = layui.table;
			//类型集合  id name
			///////////////////////////////////////筛选条件中下拉框的动态数据////////////////////////////////////////////////
			var courseTypeList;
				$.getJSON("courseTypeSelect", function(result){
					//获取时候是个data数据类型  所以我们需要遍历一下  然后  进行   数据赋值
					courseTypeList = result.data;
					for (var i = 0; i < courseTypeList.length; i++) {
						//可用的才放入
						if(courseTypeList[i].couTypeState==0){
							$(".loadType").append("<option value='"+courseTypeList[i].couTypeId+"'>"+courseTypeList[i].couTypeName+"</option>" )
						}
					}
				   //刷新表单
				   form.render('select');
				});
				
		    //表格加载数据:  JSON
			//表格的加载  ：ajax请求，然后渲染表格  // 必须有couTypeId
			table.render({
				elem: '#test-course' //那个table  id的值
					,
				url: 'courseSelect' //  url后面 servlet | json
					,
				cols: [
					[ //解析json数据 表头
						{
							type: 'checkbox',
							fixed: 'left',
						}, {
							field: 'couId',
							width: 220,
							title: '课程编号',
							sort: true
						}, {
							field: 'couName',
							title: '课程名称',
							minWidth: 80
						},{
							field: 'couContext',
							title: '课程描述',
							minWidth: 80
						},{
							field: "couType",//对象 对象里面属性
							title: '类别',
							minWidth: 80,
							templet: function(d){
								////////////////////根据id跟集合对比出这个id的name值///////////////////////////
								var couTypeName="";
								if(d.couTypeId!=null){
									for(var i=0;courseTypeList.length;i++){
										if(courseTypeList[i].couTypeId==d.couTypeId){
											couTypeName=courseTypeList[i].couTypeName;
											break;
										}
									}
								}
								return couTypeName;
							}
						}, {
							field: 'couScore',
							title: '学分',
							width: 150
						}, {
							field: 'couCreateTime',
							title: '创建时间',
							width: 150,
						templet: '<div>{{layui.util.toDateString(d.couCreateTime,\'yyyy-MM-dd HH:mm:ss\')}}</div>'
						}, {
							field: 'couUpdateTime',
							title: '更新时间',
							width: 150,
						templet: '<div>{{layui.util.toDateString(d.couUpdateTime,\'yyyy-MM-dd HH:mm:ss\')}}</div>'
						}, {
							field: 'couState',
							title: '状态',
							width: 150,
						templet: function(d){
							return d.couState==0?'可用':'禁用';
						}
						}, {
							title: '操作',
							width: 150,
							align: 'center',
							fixed: 'right',
							toolbar: '#table-rows-course'
						}
					]
				],
				page: true //是否开启分页
					,
				limit: 10 //每页显示的条数
					,
				limits: [5, 10, 20, 50, 100] // 选择分页的显示条数
					,
				height: 500,
				text: '对不起，加载出现异常,请刷新试试。'
			});
			/*表格工具的事件*/
			table.on('tool(filter-course)', function(obj) {
				console.log(obj); //当前对象
				
				//获取当前行的数据   rows数据
				var data = obj.data;
				console.log(obj.event); //当前点击事件的名称
				if(obj.event == "del") {//删除
					//ajax请求后端删除
					$.getJSON("courseTypeDeleteById",{id:obj.data.couId}, function(result){
						//状态0 删除成功
						if(result.code==0){
							layer.msg(result.msg,function(){
								$("#search-submit").trigger('click');//触发筛选按钮的事件,那么就会重新查询
							});
						}else{
							layer.alert(result.msg);
						}
					});


				} else {
				   console.log("查看数据详情");
				   console.log(obj.data); //当前行的数据
				   //把数据放入表单中
				    console.log(obj.data.type);//name
				    //option  id
				   //给表单赋值
					//form.val("edit-courseForm", obj.data);
					
					form.val("edit-courseForm", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
						  "couId": obj.data.couId // "name": "value"
						  ,"couName":  obj.data.couName
						  ,"couTypeId": obj.data.couTypeId
						  ,"couContext": obj.data.couContext
						  ,"couScore": obj.data.couScore
						});
					form.render('select');	
					$("#display_id").css("display","block");
				   //把数据放入 from中进行展示
				   	layer.open({
						type: 1,
						title: '修改学生信息',
						content: $('#courseForm'),
						maxmin: true,
						area: ['600px', '400px'],
						resize: false,
						yes: function(index, layero) {
							$("#studentForm-submit").trigger('click'); //提交绑定点击事件
						},
						cancel: function(index, layero) {
							//把表单的display  设置成none
							$('#courseForm').css("display", "none");
							return true;
						}
					});
				   
				}
			});
			//多条件查询 form 表单的submit 绑定提交事件
			form.on('submit(search-filter)', function(data) {
				console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
				console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
				console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
				var field = data.field;
				//给表单然后进行 table 筛选
				table.reload('test-course', {//page  当前页面  limit 每页显示的条数
					//http://127.0.0.1:8020/day12_web/jw/json/course.json?page=1&limit=10&name=English&type=1&startSocre=1&endSocre=10
					url: 'courseSelect' //异步数据接口
						,
					where: data.field //设定异步数据接口的额外参数
					//,height: 300
				});

				return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
			});

			/**
			 * 添加和批量删除的方法
			 */
			var 	active={
				add:function(){
					//打开新得窗口  窗口展示一个表单  让用户填入新的数据
					//里面数据清空
					form.val("edit-courseForm", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
						  "id": "" // "name": "value"
						  ,"name": ""
						  ,"type": ""
						  ,"score": ""
						});
						$("#display_id").css("display","none");
					//把隐藏的表单显示新窗口中
						layer.open({
						type: 1,
						title: '添加学生信息',
						content: $('#courseForm'),
						maxmin: true,
						area: ['600px', '400px'],
						resize: false,
						yes: function(index, layero) {
							$("#studentForm-submit").trigger('click'); //提交绑定点击事件
						},
						cancel: function(index, layero) {
							//把表单的display  设置成none
							$('#courseForm').css("display", "none");
							return true;
						}
					});
					
				},
				batchdel:function(){
					//查询看勾选的数据
					var checkData = table.checkStatus('test-course').data; //idTest 即为基础参数 id 对应的值
					if(checkData.length>0){
						console.log(checkData);
					}else{
						layer.alert('请选择数据', {icon: 2});//1.√  2.错误 3:? 4锁 5"不开心" 6.开心
					}
					
				}
				
			}
			//批量删除 添加按钮 解析data-type的值,绑定对应的事件
			$('.layui-btn-course').on('click', function() {
				var type = $(this).data('type');
				active[type] ? active[type].call(this) : '';
			});

			//新增修改的 form 表单的submit 绑定提交事件
			form.on('submit(courseForm-filter)', function(data) {
				console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
				console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
				console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
				var field = data.field;
				if(field.couId == "") {
					//添加  ajax
					console.log("这是添加");
					 $.post("courseAdd", data.field,
                      function(result){//0  -1
                               alert(result.msg);
						  location.reload();//刷新页面
                      },"json");
				} else {
					//修改 ajax
					console.log("这是修改");
				$.post("courseUpdate", data.field,
                      function(result){//200  -1
						  alert(result.msg);
						  location.reload();//刷新页面
                      },"json");
				}
				return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
			});
		});
	</script>
</html>
